<template>
    <div class="back_contain_n screen_full" ref="screenFull">
        <div class="_top">
            <span @click="screenFullFun" class="iconfont icon-quanping1 icon_full"></span>
            <div class="_left_logo">
                <img :src="sysInfo.headImg" />
            </div>
            <div class="_right_box">
                <p class="_titlens">{{tabName}}</p>
                <div style="display: flex;">
                    <div class="input_flex">
                        <span class="search_left">生产日期：</span>
                        <span>{{headInfo.dutyDay}}</span>
                    </div>
                    <div class="input_flex">
                        <span class="search_left">班次：</span>
                        <span>{{headInfo.whiteDay =='1'?'白班':'夜班'}}</span>
                    </div>
                    <div class="input_flex">
                        <span class="search_left">班长：</span>
                        <span>{{headInfo.banzhang}}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="back_contain">
            <div class="btn_flex">
                <div @click="handleClick()" class="active">发 车</div>
            </div>
        </div>

        <!-- <dv-scroll-board :config="tableData" class="inline_dv_table" @click="dvTable" /> -->

        <!-- <div class="zll-dialog">
            <popout title="挤塑直切过程品控" :visible.sync="addDialog" v-if="addDialog" class="orderSize">
                <add ref="add" slot="content" :editData="editData" :type="type" :tabName="tabName" :isScreenfull="isScreenfull"></add>
                <template slot="bottom">
                    <p class="zll-botton Info" @click="addDialog = false">关 闭</p>
                    <p class="zll-botton" v-show="editData.lineStatus =='0' ||!editData.lineStatus"  @click="()=>{this.$refs.add.submitForm('addForm')}">保存</p>
                </template>
            </popout>
        </div>  -->


    </div>
</template>

<script>
    import screenfull from 'screenfull'
    export default {
        data() {
            return {
                tableLoading: true, //table刷新
                type: '',
                editData: {},
                queryForm: { type: '' },
                refreshInterval: null, // 用于存储定时器的引用
                tableData: {
                    carousel: 'page',
                    waitTime: 5000,
                    headerBGC: '#F2F2F2',
                    oddRowBGC: '#fff',
                    evenRowBGC: '#F2F2F2',
                    align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center',],
                    headerHeight: '50',
                    rowNum: 8,
                    header: ['设备号', '计划名称', '规格', '直径±0.1mm', '长度±2mm', '产品重量（g）', '气味', '杂质', '外观', '壁厚≤0.02mm', '尖口≥45°', '检测时间', '质检员', '操作'],
                    columnWidth: [120, 170, 250, 150, 150, 150, 150, 150, 150, 150, 150, 230, 160, 150, 150,],
                    data: []
                },
                headInfo: { banzhang: '', whiteDay: '', dutyDay: '' },
                tabName: '',
                lineOthers: [],
                addDialog: false,
                sysInfo: {
                    headImg: require('../../../../assets/back_manage_img/logo.png'),
                },
                isScreenfull: false,
                agvType: '',
                si:null,
                taskCode:'',
            }
        },
        methods: {
            getAgvPoint() {
                let self = this;
                self.$http({
                    url: "/jinl/plan/getAgvPoint",
                    method: "post",
                    params: {}
                }).then(resp => {
                    if (resp.success) {
                        if(resp.result&&resp.result.taskCode){
                            this.taskCode = resp.result.taskCode;
                        }
                        
                    }
                })
            },
            handleClick() {
                let self = this;
                self.$http({
                    url: "/jinl/plan/callAgv",
                    method: "post",
                    params: { taskCode: this.taskCode }
                }).then(resp => {

                })
            },
            screenFullFun() {
                if (!screenfull.isEnabled) {
                    // 如果不支持进入全屏，发出不支持提示
                    this.$message({
                        message: "您的浏览器版本过低不支持全屏显示！",
                        type: "warning",
                    });
                    return false;
                }
                this.isScreenfull = !this.isScreenfull
                screenfull.toggle(this.$refs.screenFull);
            },

            getLineOtherList() {
                let self = this;
                self.headInfo = { banzhang: '', whiteDay: '', dutyDay: '' };
                self.lineOthers = [];
                self.$http({
                    url: "/jinl/lineOther/getLineOtherList",
                    method: "post",
                    params: self.queryForm
                }).then(resp => {
                    if (resp.success) {
                        console.log(resp.result)
                        self.lineOthers = resp.result.lineOthers || [];
                        self.headInfo.dutyDay = resp.result.dutyDay;
                        self.headInfo.whiteDay = resp.result.whiteDay;
                        self.headInfo.banzhang = resp.result.banzhang;
                        let allDatas = [];
                        for (let data of self.lineOthers) {
                            let tables = [];
                            tables[0] = data.deviceCode || '';
                            tables[1] = '<span title="' + (data.planName || '') + '">' + (data.planName || '') + '</span>';
                            tables[2] = data.gradeValue || '';
                            tables[3] = data.zjValue || '';
                            tables[4] = data.cdValue || '';
                            tables[5] = data.zlValue || '';
                            tables[6] = data.qwValue || '';
                            tables[7] = data.zzValue || '';
                            tables[8] = data.wgValue || '';
                            tables[9] = data.phValue || '';
                            tables[10] = data.jkValue || '';
                            tables[11] = '<span title="' + (data.createTimeFt || '') + '">' + (data.createTimeFt || '') + '</span>';
                            tables[12] = data.zjUserName || '';
                            tables[13] = '<span class="_edit">编辑</span>'
                            allDatas.push(tables);
                        }
                        self.tableData.data = JSON.parse(JSON.stringify(allDatas));
                        self.tableData = Object.assign({}, self.tableData);
                    }
                });
            },
            getSysHeadImg() {
                let self = this;
                self.$http({
                    url: "/jinl/file/api/queryFileList?",
                    method: "post",
                    params: { type: '4', }
                }).then(resp => {
                    if (resp.success) {
                        if (resp.result.length > 0) {
                            self.sysInfo.headImg = resp.result[0].fileUrl;
                        }

                    }
                });
            },
            refreshPageData() {
                // 这个函数用于刷新页面数据
                // 你可以根据实际情况重新加载数据或者执行其他刷新逻辑
                this.getLineOtherList();
                this.getSysHeadImg();
            },
            startAutoRefresh() {
                // 设置定时器，每隔一小时刷新页面数据
                this.refreshInterval = setInterval(() => {
                    this.refreshPageData();
                }, 2400000); // 40 分(分钟)=2400000 毫秒
            },
            stopAutoRefresh() {
                // 清除定时器
                if (this.refreshInterval) {
                    clearInterval(this.refreshInterval);
                    this.refreshInterval = null;
                }
                if(this.si){
                    clearInterval(this.si);
                    this.si = null;
                }
            },
            startSi(){
                this.si = setInterval(() => {
                    this.getAgvPoint();
                }, 10000);
            },

        },
        mounted() {
            let self = this;
            self.queryForm.type = self.$route.meta.type;
            if (self.queryForm.type == '1') {
                self.tabName = '成型 AGV自动送料点 1';
            } else if (self.queryForm.type == '2') {
                self.tabName = '成型 AGV自动送料点 2';
            } else if (self.queryForm.type == '3') {
                self.tabName = '成型 AGV自动送料点 3';
            } else if (self.queryForm.type == '4') {
                self.tabName = '成型 AGV自动送料点 4';
            }
            self.getLineOtherList();
            self.getSysHeadImg()
            self.$eventBus.$on("updatePipeOtherList", function () {
                self.addDialog = false;
                self.getLineOtherList()
            })
            this.getAgvPoint();
            // 组件挂载后立即启动自动刷新
            this.startAutoRefresh();
            this.startSi();
            // 组件销毁时停止自动刷新
            this.$once('hook:beforeDestroy', () => {
                this.stopAutoRefresh();
            });
        },
        components: {
        },
    }
</script>

<style lang="scss" scoped>
    @import "@/style/SearchTop.scss";

    @font-face {
        font-family: 'fonta';
        src: url(../../../../style/fontFamily.ttf);
    }

    .inline_dv_table {
        height: calc(100vh - 170px);
    }

    ._top {
        padding: 20px;
        background: #020935;
        display: flex;
        color: #00d1d0;
        position: relative;
        height: 120px;

        .icon_full {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 28px;
            color: #fff;
        }

        .agv {
            position: absolute;
            cursor: pointer;
            top: 20px;
            right: 100px;
            font-size: 28px;
            color: #fff;
            border-radius: 4px;
            padding: 0 10px 0 10px;
            background-color: #00d1d0;
        }

        .agv:hover {
            background-color: #18fcfc;
        }

        ._left_logo {
            border-right: 1px solid #eee;
            width: 230px;
            font-size: 14px;
            text-align: center;
            padding-right: 20px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        ._right_box {
            width: calc(100% - 231px);
            padding: 0 20px;

            ._titlens {
                font-size: 46px;
                font-family: fonta;
                color: #fff;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                span {
                    color: #00d1d0;
                }
            }

            .input_flex {
                display: flex;
                align-items: flex-start;
                width: 160px;
                line-height: 26px;
                font-size: 14px;

                .search_left {
                    width: 72px;
                    color: #fff;
                    text-align: center;
                }
            }
        }
    }

    .back_contain {
        width: 100%;
        height: calc(100vh - 170px);
        position: relative;
    }

    .btn_flex {
        width: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .disabled {
            cursor: not-allowed;
            /* pointer-events: none; */
        }

        div {
            height: 250px;
            font-size: 80px;
            text-align: center;
            cursor: pointer;
            border-radius: 20px;
            color: #eee;
            line-height: 250px;
            font-weight: bold;
            background-color: #0193DE;
            /* margin-right: 50px; */
        }

        div:hover {
            background-color: #139de2;
        }
    }
</style>